<template>
  <div class='form-add'>
    <div v-for="(array, index0) in data" :key="index0">
      <van-cell-group v-for="(item,index) in array" :key="index">
        <div v-if="item.type=='input'" class="add-title-box">
          <van-field v-model="$store.state.formData[addKey][index0][item.prop]" input-align='left' :type="item.dataType||'input'" :label="item.label" :placeholder="item.placeholder" />
          <img class="active" :src="imgs.add" alt="" @click="addItem('add',index0)">
          <img v-show="index0!=0" class="active" :src="imgs.del" alt="" @click="addItem('del',index0)">
        </div>
        
        <p class="select-box" v-else-if="item.type==='select'||item.type==='datetime'" @click="showAcheet(item)"><span>{{item.label}}</span><span class="fr">{{item.value||$store.state.formData[addKey][index0][item.prop]||item.placeholder}}</span></p>
        
        <div class="textarea-box" v-else-if="item.type=='textarea'">
          <p>{{item.label}}</p>
          <van-field  v-model="$store.state.formData[addKey][index0][item.prop]" :type="item.dataType" :placeholder="item.placeholder" />
        </div>
        <div class="margin bc-gray" v-else-if="item.type==='is-margin'"></div>

        <div class="img-box" v-else-if="item.type==='img'">
          <span>{{item.label}}</span>
          <div class="fr pr" @click="setIndex(index0,item)">
            <van-uploader :after-read="onRead">
              <div v-if="item.value" class="pr rotate-box">
                <img :src="item.value||$store.state.formData[addKey][index0].url" alt="" :class="{pa:true,rotate:images.rotate}">
              </div>
              <!-- <img v-if="item.value" :src="item.value||$store.state.formData[addKey][index0].url" alt="" :class="{pa:true,rotate:images.rotate}"> -->
              <van-icon v-else name="photograph" />
            </van-uploader>
          </div>
        </div>

        <div class="img-box multi-box" v-else-if="item.type==='multiImg'">
          <div class="pr" v-for="(item3,index3) in item.value"  @click="setIndex(index3,item)">
            <van-uploader :after-read="onRead">
              <div v-if="item3" class="pr rotate-box">
                <img :src="item3||$store.state.formData[addKey][index3]" alt="" :class="{pa:true,rotate:images.rotate}">
              </div>
              <van-icon v-else name="photograph" />
            </van-uploader>
          </div>
          
        </div>
      </van-cell-group>
    </div>

    <p style="display:none">{{formalModelData}}</p>
  </div>
</template>
<script>
export default {
  props:["modelData","addKey"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        add:require('../../../assets/images/home/icon-add.png'),
        del:require('../../../assets/images/home/icon-de.png'),
        upload:""
      },
      images:{
        index:0,
        item:{},
        rotate:false,//是否旋转图片

      },
      data:[]
    };
  },
  computed:{
    formalModelData(){
      return this.data=JSON.parse(JSON.stringify(this.modelData))
    }
  },
  methods: {
    addItem(type,index){
      if(type=='add'){
        var d = JSON.parse(JSON.stringify(this.data[index]))
        this.data.splice(index,0,d)
        var p =JSON.parse(JSON.stringify(this.$store.state.formData[this.addKey][index]))
        this.$store.state.formData[this.addKey].splice(index,0,p)
      }else if(type=='del'){
        this.data.splice(index,1)
        this.$store.state.formData[this.addKey].splice(index,1)
      }
    },

    /**
     * @name 上传图片
     */
    onRead(file){
      var that=this
      _g.showLoading()
      var img=new Image()
      img.src = file.content

      img.onload=function(){
        var orient = _g.getPhotoOrientation(img)
        if(orient == 6){
          that.images.rotate=true
        }
        // 是否上传的多张图片
        if(!Array.isArray(that.images.item.value)){
          that.images.item.value=file.content
        }else{
          that.images.item.value.splice(that.images.item.value.length-1,0,file.content)
        }
        _g.closeLoading()
      }
      _g.littleImg(file.file,this.getImgUrl)
    },

    /**
     * @name 上传图片获取地址
     */
    getImgUrl(file){
      let data = new FormData();
      data.append('file', file);
      if(sessionStorage.getItem('number')&&data)data.append('number',sessionStorage.getItem('number'));
      $axios.post(PATH+'upload/uploadImg',data).then(res=>{
        if(res.error){
          _g.toMessage({error:1,msg:"上传失败"})
          return
        }
        if(!Array.isArray(this.images.item.value)){
          this.$store.state.formData[this.addKey][this.images.index].url=res.data.msg
        }else{
          console.log(this.$store.state.formData.url,this.addKey)
          this.$store.state.formData[this.addKey].splice(this.$store.state.formData[this.addKey].length-1,0,res.data.msg)
        }
      })
    },
    
    /**
     * @name 设置上传图片索引
     */
    setIndex(index0,item){
      this.images.index=index0
      this.images.item=item
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.form-add {
  width: 100%;
  overflow-x: hidden;

  .btn-sure{
    width:90%;
    margin:120px 5%;
    font-size: 18px;
  }
  .select-box{
    padding: 20px 35px;
    height: 60px;
    line-height: 60px;
    color: #333;
    border-bottom: 1px solid #efeff4;
  }
  .textarea-box{
    
    p{
      padding: 20px 35px;
      height: 60px;
      line-height: 60px;
      color: #333;
      box-sizing: content-box;
      border-bottom: 1px solid #efeff4;
    }
  }
  .margin{
    height: 20px;
  }

  .add-title-box{
    display: flex;
    border-bottom: 1px solid #efeff4;
    box-sizing: border-box;

    img{
      height: 50px;
      margin: 25px;
      margin-left: 0;
    }
    img:active{
      background: transparent;
    }
  }
  .img-box{
    padding: 20px 35px;
    color: #333;
    border-bottom: 1px solid #efeff4;
    display: flex;

    >div{
      margin-left: auto;
      width: 150px;
      height: 150px;

      img{
        min-width: 100%;
        max-height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .rotate{
        transform: translate(-50%,-50%) rotate(90deg);
      }
    }
    .rotate-box{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
  .multi-box{
    flex-wrap: wrap;
    justify-content: flex-start;
    >div{
      margin-left: inherit;
      box-sizing:border-box;
      border: 1px dashed #ccc;
      width: 25%;
      height: 200px;
    }
    >div:nth-of-type(n+5){
      margin-top: 15px;
    }
  }
}
</style>